<template>
  <div id="wode_all">
    <van-row>
      <van-col span="6" offset="18" class="option">
        <router-link to="/option">
          <img width="25px" height="25px" src="/wode_images/wode_option.png" />
        </router-link>
        <router-link to="/notice" class="notice">
          <img width="25px" height="25px" src="/wode_images/wode_notice.png" />
        </router-link>
      </van-col>
    </van-row>

    <van-row class="login_view">
      <van-col v-if="this.$store.state.isLogin==0 || this.$store.state.user.boyu_utouxiang==''" span="5">
        <img width="70px" height="70px" src="/wode_images/wode_login.png" />
      </van-col>
      <van-col v-else span="5">
        <img width="70px" height="70px" class="touxiang" :src="this.$store.state.user.boyu_utouxiang" />
      </van-col>
      <van-col v-if="this.$store.state.isLogin==0" span="9">
        <router-link to="/login" class="login"> 登录/注册 </router-link>
      </van-col>
      <van-col v-else span="14">
        <div class="login2"> 泊友:{{this.$store.state.user.boyu_uname}} </div>
      </van-col>
      <van-col span="10"></van-col>
    </van-row>

    <van-grid :border="hasborder" icon-size="40px">
      <van-grid-item :icon="photo_1" text="收藏" to="/shoucang" />
      <van-grid-item :icon="photo_2" text="约看" to="/yuekan" />
      <van-grid-item :icon="photo_3" text="预定" to="/yuding" />
      <van-grid-item :icon="photo_4" text="秒杀" to="/miaosha" />
    </van-grid>

    <div class="discount_out">
      <div class="discount_in">
        <div>
          <div>
            <router-link to="/discount">
              <div class="discount_in_left">
                <p>优惠券</p>
                <img width="50px" height="40px" src="/wode_images/wode_discount.png" />
              </div>
            </router-link>
          </div>
          <div>|</div>
          <div>
            <router-link to="/recommend">
              <div class="discount_in_right">
                <p>推荐有礼</p>
                <img width="50px" height="40px" src="/wode_images/wode_recommend.png" />
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>

    <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
      <van-swipe-item>
        <img width="100%" src="/wode_images/swipe_1.png" />
      </van-swipe-item>
      <van-swipe-item>
        <img width="100%" src="/wode_images/swipe_2.png" />
      </van-swipe-item>
    </van-swipe>

    <p class="wode_title">我的泊寓</p>
    <div class="wode_content_out">
      <div class="wode_content_in">
        <div>
          <van-row>
            <van-col span="6">
              <router-link to="/zhangdan" class="content_item">
                <img width="30px" src="/wode_images/zhangdan.png" />
                <p>账单</p>
              </router-link>
            </van-col>
            <van-col span="6">
              <router-link to="/zhangdan" class="content_item">
                <img width="30px" src="/wode_images/shuidian.png" />
                <p>水电表</p>
              </router-link>
            </van-col>
            <van-col span="6">
              <router-link to="/zhangdan" class="content_item">
                <img width="30px" src="/wode_images/mensuo.png" />
                <p>智能门锁</p>
              </router-link>
            </van-col>
            <van-col span="6">
              <router-link to="/zhangdan" class="content_item">
                <img width="30px" src="/wode_images/baoxiu.png" />
                <p>报修</p>
              </router-link>
            </van-col>
          </van-row>
        </div>
        <div>
          <van-row>
            <van-col span="6">
              <router-link to="/zhangdan" class="content_item">
                <img width="30px" src="/wode_images/shequ.png" />
                <p>社区活动</p>
              </router-link>
            </van-col>
            <van-col span="6">
              <router-link to="/zhangdan" class="content_item">
                <img width="30px" src="/wode_images/hetong.png" />
                <p>合同</p>
              </router-link>
            </van-col>
            <van-col span="6">
              <router-link to="/zhangdan" class="content_item">
                <img width="30px" src="/wode_images/pingjia.png" />
                <p>服务评价</p>
              </router-link>
            </van-col>
            <van-col span="6">
              <router-link to="/zhangdan" class="content_item">
                <img width="30px" src="/wode_images/fapiao.png" />
                <p>发票报销</p>
              </router-link>
            </van-col>
          </van-row>
        </div>
        <div>
          <van-row>
            <van-col span="6">
              <router-link to="/zhangdan" class="content_item">
                <img width="30px" src="/wode_images/dengji.png" />
                <p>居住登记</p>
              </router-link>
            </van-col>
            <van-col span="6">
              <router-link to="/zhangdan" class="content_item">
                <img width="30px" src="/wode_images/qingdan.png" />
                <p>物品清单</p>
              </router-link>
            </van-col>
            <van-col span="6">
              <router-link to="/zhangdan" class="content_item">
                <img width="30px" src="/wode_images/tongzhu.png" />
                <p>同住人</p>
              </router-link>
            </van-col>
            <van-col span="6">
              <router-link to="/zhangdan" class="content_item">
                <img width="30px" src="/wode_images/xuanpei.png" />
                <p>选配包</p>
              </router-link>
            </van-col>
          </van-row>
        </div>
        <div>
          <van-row>
            <van-col span="6">
              <router-link to="/zhangdan" class="content_item">
                <img width="30px" src="/wode_images/tousu.png" />
                <p>我要投诉</p>
              </router-link>
            </van-col>
            <van-col span="6">
              <router-link to="/zhangdan" class="content_item">
                <img width="30px" src="/wode_images/jianyi.png" />
                <p>我有建议</p>
              </router-link>
            </van-col>
            <van-col span="6">
              <router-link to="/zhangdan" class="content_item">
                <img width="30px" src="/wode_images/tucao.png" />
                <p>吐槽APP</p>
              </router-link>
            </van-col>
            <van-col span="6">
              <router-link to="/zhangdan" class="content_item">
                <img width="30px" src="/wode_images/tucao.png" />
                <p>吐槽APP</p>
              </router-link>
            </van-col>

          </van-row>
        </div>
      </div>
    </div>

    <!-- <my-footer></my-footer> -->
  </div>
</template>

<script>
  // import myFooter from "../components/MyFooter.vue";
  export default {
    // components: { myFooter },
    data() {
      return {
        hasborder: false,
        photo_1: "/wode_images/wode_menu1.png",
        photo_2: "/wode_images/wode_menu2.png",
        photo_3: "/wode_images/wode_menu3.png",
        photo_4: "/wode_images/wode_menu4.png",
      };
    },
  };
</script>

<style>
  .touxiang {
    border-radius: 50%
  }

  #wode_all {
    background-color: #f2f2f2;
  }

  .option {
    /* padding: 10px 10px 5px 25px; */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
  }

  .notice {
    margin-left: 5px;
  }

  .login_view {
    height: 80px;
    padding-left: 15px;
  }

  .login {
    font-size: 25px;
    line-height: 70px;
    font-weight: bold;
    padding-left: 10px;
    color: black;
  }

  .login2 {
    font-size: 22px;
    line-height: 70px;
    font-weight: bold;
    padding-left: 10px;
    color: darkorange
  }

  #wode_all .van-grid-item__text {
    font-size: 16px;
    color: black;
    font-weight: 500;
  }

  #wode_all .van-grid-item__content {
    background-color: #f2f2f2;
  }

  .discount_out {
    display: flex;
    justify-content: center;
  }

  .discount_in {
    width: 90%;
    height: 100px;
    background-color: #fff;
    border-radius: 15px;
  }

  .discount_in>div {
    display: flex;
  }

  .discount_in>div>div:first-child {
    width: 45%;
    height: 100px;
    /* background-color: green; */
  }

  .discount_in>div>div:nth-child(2) {
    width: 10%;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 40px;
    color: #f2f2f2;
    /* background-color: hotpink; */
  }

  .discount_in>div>div:last-child {
    width: 45%;
    height: 100px;
    /* background-color: blue; */
  }

  .discount_in_left {
    display: flex;
    justify-content: space-around;
  }

  .discount_in_left>p {
    font-weight: 600;
    color: #000;
    font-size: 20px;
    line-height: 60px;
  }

  .discount_in_left>img {
    margin-top: 28px;
  }

  .discount_in_right {
    display: flex;
    justify-content: space-around;
  }

  .discount_in_right>p {
    font-weight: 600;
    color: #000;
    font-size: 20px;
    line-height: 60px;
  }

  .discount_in_right>img {
    margin-top: 28px;
  }

  .my-swipe {
    margin-top: 20px;
  }

  .my-swipe .van-swipe-item {
    background-color: #f2f2f2;
  }

  .wode_title {
    font-size: 25px;
    margin: 20px 10px;
    font-weight: bold;
  }

  .wode_content_out {
    display: flex;
    justify-content: center;
  }

  .wode_content_in {
    width: 90%;
    height: 400px;
    background-color: #fff;
    margin-bottom: 70px;
    border-radius: 20px;
  }

  .wode_content_in>div {
    height: 100px;
  }

  .content_item {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  .content_item>img {
    margin-top: 20px;
  }

  .content_item>p {
    margin-top: 5px;
    color: #000;
    font-size: 15px;
  }
</style>